<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Table 表格4</title>
	<link rel="stylesheet" href="../../static/css/element2.css">
	<script src="../../static/js/vue.global.prod.js"></script>
	<script src="../../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-affix :offset="10"><div id="a_link"></div></el-affix><script src="table.js"></script>
	<el-divider content-position="left">树形数据与懒加载</el-divider><!-- =============================================================== -->
	<p class="desc">支持树类型的数据的显示。 当 row 中包含 children 字段时，被视为树形数据。 渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。 设置 Table 的lazy属性为 true 与加载函数 load 。 通过指定 row 中的hasChildren字段来指定哪些行是包含子节点。 children 与hasChildren都可以通过 tree-props 配置。</p>
	<div>
		<el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" indent=30 border default-expand-all>
			<el-table-column prop="date" label="date" sortable width="280"></el-table-column>
			<el-table-column prop="name" label="Name" sortable width="180"></el-table-column>
		</el-table>
	
		<el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
			<el-table-column prop="id" label="ID" width="120"></el-table-column>
			<el-table-column prop="date" label="Date" width="180"></el-table-column>
			<el-table-column prop="name" label="Name" width="180"></el-table-column>
		</el-table>
	</div>
	
</div>
</body>
<script>

const Main = {
	data() {
		return {
			value: '',
			fileIndex: 4,
			tableData: [
				{id: 1,date: '2016-05-02',name: 'wangxiaohu',},
				{id: 2,date: '2016-05-04',name: 'wangxiaohu',},
				{id: 3,date: '2016-05-01',name: 'wangxiaohu',
					children: [
						{id: 31,date: '2016-05-11',name: 'wangxiaohu',},
						{id: 32,date: '2016-05-12',name: 'wangxiaohu',},
					],
				},
				{id: 4,date: '2016-05-03',name: 'wangxiaohu',},
			],
			tableData1: [
				{id: 1,date: '2016-05-02',name: 'wangxiaohu',},
				{id: 2,date: '2016-05-04',name: 'wangxiaohu', hasChildren: true},
				{id: 3,date: '2016-05-01',name: 'wangxiaohu',},
				{id: 4,date: '2016-05-03',name: 'wangxiaohu', hasChildren: true},
			],
		}
	},
	computed:{
		btn(){
			return function(i){
				if(this.$data.fileIndex == i){
					return "layui-btn";
				}else{
					return "layui-btn0";
				}
			}
		}
	},
	methods:{
		handleClick() {
			console.log('click')
		},
		load(row, treeNode, resolve) {
			// console.log(row, treeNode, resolve);
			// console.log(row.id);
			if(row.id == 2){
				setTimeout(() => {
					resolve([
						{id: 21,date: '2016-05-01',name: '21号的',},
						{id: 22,date: '2016-05-01',name: '22号的', hasChildren: true},
					])
				}, 300)
			}else if(row.id == 4){
				setTimeout(() => {
					resolve([
						{id: 41,date: '2016-05-01',name: '41号的'},
						{id: 42,date: '2016-05-01',name: '42号的'},
					])
				}, 300)
			}else if(row.id == 22){
				setTimeout(() => {
					resolve([
						{id: 221,date: '2016-05-01',name: '221号的--'},
						{id: 222,date: '2016-05-01',name: '222号的'},
					])
				}, 300)
			}
		}
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
// console.log(ElementPlus)
</script>
</html>
